<!-- 预约详情页面 -->
<template>
  <div class="yyxx-container">
    <!-- 医生卡片 -->
    <div class="doctor-card">
      <img
        class="doctor-avatar"
        :src="params.avatar || 'https://via.placeholder.com/64x64?text= '"
        alt="头像"
      />
      <div class="doctor-info">
        <div class="doctor-row">
          <span class="doctor-name">{{ params.name || '医生姓名' }}</span>
          <span class="doctor-title">{{ params.grade || '医生职称' }}</span>
          <span class="doctor-dept">{{ params.depa || '医生科室' }}</span>
        </div>
        <div class="doctor-hospital">{{ params.h_title || '医院名称' }}</div>
        <div class="doctor-goodat">
          擅长：<span class="goodat-keyword">{{ params.good_at || '擅长' }}</span>
        </div>
      </div>
    </div>

    <!-- 预约挂号时间 -->
    <div class="section-title">
      <span class="section-bar"></span>
      <span class="section-title-text">预约挂号时间</span>
    </div>
    <div class="form-row" @click="showPicker = true">
      <!-- 日历选择器 -->
      <uni-datetime-picker
        v-model="selectedDate"
        type="date"
        :start="today"
        :clear-icon="false"
        :hide-second="true"
        :border="false"
        :show="showPicker"
        @close="showPicker = false"
        @change="onDateChange"
      />
      <span class="form-arrow">&gt;</span>
    </div>
    <div class="divider"></div>

    <!-- 就诊人姓名 -->
    <div class="section-title">
      <span class="section-bar"></span>
      <span class="section-title-text">就诊人姓名</span>
    </div>
    <div class="form-label2">姓名</div>
    <input class="form-input" v-model="name" placeholder="请输入姓名" />
    <div class="divider"></div>

    <!-- 确认预约按钮 -->
    <button class="submit-btn" @click="submitYyxx">确认预约</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useMemberStore } from '@/store'
import dayjs from 'dayjs'
import { addYyghData } from '@/https/HomeHTTP'

const name = ref('')
const showPicker = ref(false)
const selectedDate = ref('')
const today = (() => {
  const d = new Date()
  const m = d.getMonth() + 1
  const day = d.getDate()
  return `${d.getFullYear()}-${m < 10 ? '0' + m : m}-${day < 10 ? '0' + day : day}`
})()

const params = ref({})
const memberStore = useMemberStore()
onLoad((query) => {
  params.value = query
  console.log(params.value)
  name.value = memberStore.username
})

function onDateChange(e: any) {
  showPicker.value = false
  selectedDate.value = typeof e === 'string' ? e : (e.detail?.value || '')
}
const submitYyxx = async () => {
  const newGetData = {
    uid: memberStore.userUid,
    did: params.value.did,
    yy_time: selectedDate.value,
    state: 0,
    create_time: dayjs(today).format('YYYY-MM-DD HH:mm:ss'),
    update_time: dayjs(today).format('YYYY-MM-DD HH:mm:ss'),
    hid: params.value.hid,
  }
  const res = await addYyghData(newGetData)
  console.log(res)
  if (res.code === 200) {
    uni.showToast({
      title: '预约成功',
      icon: 'success',
    })
    uni.navigateTo({
      url: `/pages/component/yyxx/yycgxq/yycgxq?doctorName=${encodeURIComponent(
        params.value.name,
      )}&grade=${encodeURIComponent(params.value.grade)}&depa=${encodeURIComponent(
        params.value.depa,
      )}&h_addr=${encodeURIComponent(params.value.h_addr)}&avatar=${encodeURIComponent(
        params.value.avatar,
      )}&appointmentTime=${encodeURIComponent(
        selectedDate.value,
      )}&hospitalName=${encodeURIComponent(
        params.value.h_title,
      )}&hospitalAddress=${encodeURIComponent(params.value.h_addr)}`,
    })
  }
}
</script>

<style lang="scss" scoped>
.yyxx-container {
  background: #fff;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  padding: 0;
}
.doctor-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px 0 #e6f7e6;
  margin: 24px 18px 18px 18px;
  padding: 16px 24px 16px 16px;
}
.doctor-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #eaeaea;
  margin-right: 18px;
  border: 1px solid #e0e0e0;
}
.doctor-info {
  flex: 1;
  min-width: 0;
}
.doctor-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.doctor-name {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  margin-right: 8px;
}
.doctor-title {
  background: #2583e7;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border-radius: 4px;
  padding: 2px 10px;
  margin-right: 6px;
}
.doctor-dept {
  background: #e6f0fa;
  color: #2583e7;
  font-size: 15px;
  font-weight: bold;
  border-radius: 4px;
  padding: 2px 10px;
}
.doctor-hospital {
  font-size: 16px;
  color: #444;
  margin-bottom: 4px;
}
.doctor-goodat {
  font-size: 16px;
  color: #444;
}
.goodat-keyword {
  color: #ff6600;
  font-weight: bold;
}
.section-title {
  display: flex;
  align-items: center;
  margin: 32px 0 18px 18px;
}
.section-bar {
  width: 6px;
  height: 24px;
  background: #00d200;
  border-radius: 3px;
  margin-right: 10px;
  display: inline-block;
}
.section-title-text {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}
.form-row {
  display: flex;
  align-items: center;
  margin: 0 18px 0 18px;
  font-size: 20px;
  color: #222;
  height: 48px;
}
.form-icon {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}
.form-label {
  flex: 1;
  font-size: 20px;
  color: #222;
}
.form-arrow {
  color: #bbb;
  font-size: 28px;
  margin-left: 8px;
}
.divider {
  height: 1.5px;
  background: #f0f0f0;
  margin: 0 18px 0 18px;
}
.form-label2 {
  font-size: 22px;
  font-weight: bold;
  color: #555;
  margin: 24px 0 8px 18px;
}
.form-input {
  width: calc(100% - 36px);
  margin: 0 18px 0 18px;
  border: none;
  border-bottom: 2px solid #3ec99e;
  font-size: 20px;
  color: #222;
  padding: 8px 0;
  outline: none;
  background: transparent;
}
.submit-btn {
  width: calc(100% - 80px);
  margin: 24px 40px 0 40px;
  background: #0ed96b;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 0;
  box-shadow: 0 2px 8px 0 #b6f5b6;
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 1px;
  &:hover {
    background: #00b97b;
  }
}
</style>